import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Entypo } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";

const tagComponent = (type) => {
  if (type === "published") {
    return (
      <View style={[styles.tag, { backgroundColor: "#8ABAFF" }]}>
        <Text style={styles.tagText}>发布过</Text>
      </View>
    );
  } else if (type === "publishing") {
    return (
      <View style={styles.tag}>
        <Text style={styles.tagText}>使用中</Text>
      </View>
    );
  } else {
    return (
      <View style={[styles.tag, { backgroundColor: "#aaa" }]}>
        <Text style={styles.tagText}>未发布</Text>
      </View>
    );
  }
};

const TestCard = ({
  test,
  onPress,
  isDelete,
  onDeleted,
  deletedId,
  onSelected,
  selectedId,
  isSelect,
}) => {
  return (
    <View style={styles.container}>
      {isSelect && (
        <TouchableOpacity
          style={styles.selectOption}
          onPress={() => onSelected(test._id)}
        >
          {test._id === selectedId ? (
            <AntDesign name="checkcircleo" size={18} color="#67c23a" />
          ) : (
            <Entypo name="circle" size={18} color="#D8D8D8" />
          )}
        </TouchableOpacity>
      )}

      {isDelete && (
        <TouchableOpacity
          onPress={() => onDeleted(test._id)}
          style={styles.selectOption}
        >
          {test._id === deletedId ? (
            <AntDesign name="closecircleo" size={18} color="red" />
          ) : (
            <AntDesign name="closecircleo" size={18} color="#aaa" />
          )}
        </TouchableOpacity>
      )}
      <TouchableOpacity style={styles.card} onPress={onPress}>
        <Text style={styles.title}>{test.title}</Text>
        <View style={styles.bottom}>
          {tagComponent(test.type)}
          <Text style={styles.time}>{test.time}</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginLeft: 16,
    // marginRight: 16,
    flexDirection: "row",
  },
  card: {
    flex: 10,
    padding: 20,

    marginVertical: 5,
    backgroundColor: "#fff",
    borderRadius: 2,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  title: {
    fontSize: 17,
    alignSelf: "center",
  },
  bottom: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 10,
  },
  tag: {
    backgroundColor: "#F47C68",
    backgroundColor: "#A9D67C",
    padding: 3,
  },
  tagText: {
    color: "#fff",
    fontSize: 12,
  },
  time: {
    color: "#aaa",
    fontStyle: "italic",
    paddingRight: 5,
    fontSize: 12,
  },
  selectOption: {
    justifyContent: "center",

    flex: 1,
  },
});

export default TestCard;
